<template>  
    <view class="container">  
	    <kefu></kefu>
		<msg></msg>
		<view class="user-section">
			<image class="bg" src="/static/user-bg.png"></image>
			<view class=".user-personal-information">
				<view class="portrait-box">
					<image class="portrait" :src="src" @click="navTo('/pages/user/usercenter')" ></image>
				</view>
				<view class="info-box">
					<view class="username">
						{{name}}
					</view>
					<view class="members">
						<image src="/static/vip.png"></image>
						<text>{{mid}}</text>
					</view>
				</view>
				<view class="tj-sction">
					<view class="tj-item" @click="navTo('/pages/user/amount')">
						<text class="num"><text>{{balance}}</text>元</text>
						<text class="num">余额</text>
					</view>
					<view class="the-divider"></view>
					<view class="tj-item" @click="navTo('/pages/user/coupons')">
						<text class="num">{{couponNum}}</text>
						<text class="num">优惠券</text>
					</view>
					<view class="the-divider"></view>
					<view class="tj-item" @click="navTo('/pages/user/shareJin')">
						<text class="num"><text>{{shareMoney}}</text>元</text>
						<text class="num">积分</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="cover-container">
			<!-- 订单 -->
			<view class="order-section">
				<view class="the-order">
					<view>我的订单</view>
					<view class="ckqb" @click="navTo('/pages/user/order')">
						<text>查看全部订单</text>
						<image src="/static/jri.png"></image>
					</view>
				</view>
				<view class="user-shop">
					<view class="order-item" @click="navTo('/pages/user/order')" hover-class="common-hover"  :hover-stay-time="50">
						<image src="/static/wallet.png"></image>
						<text>待付款</text>
					</view>
					<view class="order-item" @click="navTo('/pages/user/order?state=1')"  hover-class="common-hover" :hover-stay-time="50">
						<image src="/static/livery.png"></image>
						<text>待发货</text>
					</view>
					<view class="order-item" @click="navTo('/pages/user/order?state=2')" hover-class="common-hover"  :hover-stay-time="50">
						<image src="/static/received.png"></image>
						<text>待收货</text>
					</view>
					<view class="order-item" @click="navTo('/pages/user/order?state=3')" hover-class="common-hover"  :hover-stay-time="50">
						<image src="/static/evaluated.png"></image>
						<text>待评价</text>
					</view>
					<view class="order-item" @click="navTo('/pages/user/order?state=5')" hover-class="common-hover"  :hover-stay-time="50">
						<image src="/static/refund.png"></image>
						<text>售后/退款</text>
					</view>
				</view>
			</view>
			
			<!-- 个人功能 -->
			<view class="history-section icon">
				<!-- <view class="sec-header" @click="navTo('/pages/user/collection')">
					<view class="user-gn">
						<image src="/static/shoucang.png"></image>
						<text>我的收藏</text>
					</view>
					<image src="/static/jri.png"></image>
				</view> -->
				<view class="sec-header" @click="navTo('/pages/user/myShare')">
					<view class="user-gn">
						<image src="/static/fenxiang.png"></image>
						<text>我的分享</text>
					</view>
					<image src="/static/jri.png"></image>
				</view>
				<view class="sec-header" @click="navTo('/pages/user/detailFine')">
					<view class="user-gn">
						<image src="/static/detailed.png"></image>
						<text>订单明细</text>
					</view>
					<image src="/static/jri.png"></image>
				</view>
			</view>
		</view>
    </view>  
</template>  
<script>  
	import msg from '@/components/msg.vue'
	import url from '../../components/hosturl.js';
	
	import listCell from '@/components/mix-list-cell';
	import kefu from '@/components/yu-kefu/yu-kefu';
    import {  
        mapState 
    } from 'vuex';
    export default {
		components: {
			listCell,
			kefu,
			msg
			
		},
		data(){
			return {
				src:'/static/missing-face.png',
				name:'游客',
				balance:0, //余额
				couponNum:0, //优惠券数量
				shareMoney:0, //分享金
				mid:'用户等级', // 用户等级
			}
		},
		onLoad(){
			if(uni.getStorageSync('login')){
				// this.name = uni.getStorageSync('nickName');
				// this.src = uni.getStorageSync('avatarUrl');
				
				// 获取信息
				uni.request({
					url:url+'/Me/getEssentialMsg',
					data:{
						token:uni.getStorageSync('token')
					},
					success: res => {
						console.log(res.data);
						this.name = res.data.msg.nickname;
						this.src = res.data.msg.avatar_url;
						this.couponNum = res.data.msg.coupon;
						this.mid = res.data.msg.is_mid;
						this.balance = res.data.msg.price;
						this.shareMoney = res.data.msg.total_price;
					}
				});
				
			}
			
		},
        computed: {
			
		},
        methods: {
			navTo(url){
				uni.navigateTo({
					url:url,
				})  
			}
        }  
    }  
</script>
<style lang='scss'>
	.container{ background: #f7f7f7; }
	.customer-service{ height: 50rpx;width: 50rpx;border-radius: 50%;position: fixed;bottom: 6%;right: 3%; }
	.user-section{ height: 420rpx;position:relative; }
	.bg{ height: 420rpx;width: 100%; }
	.user-personal-information{ position: absolute;z-index: 100;width: 96%;background: #fff;top: 280rpx;left: 2%;border-radius: 20rpx; }
	.portrait-box{ position: absolute;top: -65rpx;display: flex;justify-content: center;width: 100%; }
	.portrait{ height: 130rpx;width: 130rpx;border-radius: 50%; }
	.info-box{ padding-top: 65rpx;display: flex;justify-content: center; }
	.username{ font-size: 38rpx;line-height: 80rpx;color: #333;position: relative; }
	.members{ position: absolute;left: 61%;background: #f6b37f;font-size: 22rpx;color: #fff;height: 44rpx;top: 24rpx;border-radius: 22rpx;padding: 0 15rpx;display: flex;align-items: center; }
	.members image{ height: 30rpx;width: 30rpx;margin-right: 10rpx; }
	.members text{ height: 37rpx; }
	.tj-sction{ display: flex;justify-content: space-around;align-content: center;font-size: 30rpx;color: #333; }
	.tj-item{ display: flex;height: 140rpx;flex-direction: column;justify-content: center;align-items: center; }
	.num{ margin: 5rpx; }
	.the-divider{ height: 55rpx;border: 1rpx #f7f7f7 solid;width: 0;margin-top: 42rpx; }
	.cover-container{ margin-top: 165rpx;padding: 0 2%;padding-bottom: 300rpx; }
	.order-section{ background: #fff;border-radius: 20rpx;padding: 28rpx 28rpx; }
	.order-item{ display:flex;flex-direction: column;justify-content: center;align-items: center;width: 120rpx;height: 120rpx;font-size: 28rpx;color: #333;flex: 1; }
	.order-item image{ height: 48rpx;width: 48rpx;margin-bottom: 18rpx; }
	.user-shop{ display:flex;justify-content: space-around;align-content: center; }
	.the-order{ font-size: 30rpx;color: #333;padding: 0 40rpx 10rpx;line-height: 50rpx;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10rpx;border-bottom: 1rpx #e8e8e8 solid; }
	.ckqb{ display: flex;align-items: center; }
	.ckqb text{ font-size: 24rpx;color: #999; }
	.ckqb image{ height: 24rpx;width: 12rpx;margin-left: 5rpx; }
	.history-section{ padding: 0 28rpx;margin-top: 20rpx;background: #fff;border-radius:20rpx; }
	.sec-header{ display:flex;align-items: center;font-size: 30rpx;color: #333;line-height: 100rpx;justify-content: space-between;border-bottom: 1px #e8e8e8 solid; }
	.user-gn{ display: flex;align-items: center; }
	.user-gn>image{ height: 30rpx;width: 30rpx;margin-right: 20rpx; }
	.sec-header>image{ height: 24rpx;width: 12rpx; }
	.icon-shouhoutuikuan{ font-size:44rpx; }
</style>